webpack loader 使用 |

一、loader 使用

默认情况下, webpack只能打包js模块
但是它还提供了强大的loader功能, 借助该功能可以把诸如css/img等文件也一起打包

二、css-loader、style-loader

2.1 简介

css-loader
- 打包css文件内容到js中
- 生成的模块会输出一个数组，里面存储着每一个css文件模块的内容
style-loader
- 让打包好的css在页面中自动生效
- 内部调用css-loader生成的模块，把得到样式通过style标签的方式插入到页面让其生效

2.2 安装

npm i css-loader style-loader -D

2.3 打包说明

如果需要webpack打包其他类型文件，就必须在模块中引入

1 2	// main.js import './src/css/example.css';

2.4 webpack配置

module: {
    rules: [
        {
            test: /\.css$/,                                   // 匹配结尾css的文件
            use: [  'style-loader', 'css-loader' ]  // 使用什么loader打包css，这里顺序不能乱
        }
    ]
}

2.5 非配置方式使用

这是非配置方式指定文件打包时所用的loader，不常用

1 2	// main.js require('style-loader!css-loader!./src/css/example.css');

三、less-loader

3.1 简介

把less解析为css

3.2 安装

脚本：npm i less less-loader -D
备注：less为less-loader的依赖

3.3 使用

打包less同样需要在模块中引入
要让less文件成功打包并生效，在use中还需添加css-loader与style-loader

3.4 使用代码

1 2	// entry.js import './src/less/example.less'

3.5 webpack配置

module: {
    rules: [
        // css文件
        {
          test: /\.css$/,
          use: [  'style-loader', 'css-loader' ]
        },
        // less文件
        {
          test: /\.less$/,
          use: [ 'style-loader', 'css-loader', 'less-loader' ]
        }
    ]
}

四、sass-loader

4.1 简介

把sass解析为css

4.2 安装

脚本：npm i node-sass sass-loader -D
备注：node-sass为sass-loader的依赖
注意：根据尝试大部分情况下npm安装node-sass都失败，请使用cnpm安装

4.3 使用

打包sass同样需要在模块中引入
sass有两种文件格式，我们一般使用scss这种兼容css语法的格式
要让sass文件成功打包并生效，在use中还需添加css-loader与style-loader

4.4 使用代码

1 2	// entry.js import './src/scss/example.scss'

4.5 webpack 配置

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [ 'style-loader', 'css-loader', 'sass-loader' ]
        }
    ]
}

注意：如果是 vue-cli 生成的项目，此处的 rules 可以不用配置，生成的项目会有文件自动配置的。

五、babel-loader

5.1 简介

可把各种语法编写的脚本，解析为浏览器普遍支持的es5规范脚本。

5.2 安装

命令：npm i babel-loader babel-core babel-plugin-transform-runtime babel-preset-env -D
babel-plugin-transform-runtime 提供公共的编译函数, 可减少打包后重复性的代码
babel-preset-env 提供了转换最新ES语法的功能

5.3 babel 配置

使用babel需要在本地创建一个.babelrc配置文件，加入如下配置

{
  "presets": ["env"],
  "plugins":["transform-runtime"]
}

5.4 webpack 配置

module: {
    rules: [
        {
            test: /\.js$/,
            use: [ 'babel-loader' ],
            exclude: path.resolve(__dirname, './node_modules')  // 注意绝对路径
        }
    ]
}

5.5 JSX语法解析

如果使用react开发，需要安装babel-preset-react包
然后.babelrc在中的presets项添加一项react，webpack就可以解析转换jsx语法了

六、html-loader

6.1 简介

可以在js中以字符串的形式引入html模块
这个loader可以让我们以模块化的方式组织html模版

6.2 安装

脚本：npm i html-loader -D

6.3 使用代码

1 2	import header from './src/tpl/header.html' document.querySelector('header').innerHTML = header;

6.4 webpack配置

module: {
    rules: [
        {
          test: /\.(html|tpl)$/,
          use: ['html-loader']
        }
    ]
}

待续……